<template>
  <div @click="returnFull" style='position: fixed;z-index: 1000;top:0;left:0; width:100%;height:100vh;background: rgba(0,0,0,.5);padding:100px 50px;overflow: scroll;'>
      <div style="background: #fff;width: 40%;margin: 0 auto;padding-bottom:50px;border-radius: 10px;" @click.stop="returnFullNo">
        <div style="font-size: 21px;font-weight: bold;text-align: center;padding:30px 0 30px 0;">二维码申请</div>
        <a-form :form="form">
          <a-form-item label="剧本名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input disabled v-model="listCodeData.productName"></a-input>
          </a-form-item>
          <a-form-item label="剧本批次" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input disabled v-model="listCodeData.itemPatch"></a-input>
          </a-form-item>
          <a-form-item label="二维码数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input disabled v-model="listCodeData.total"></a-input>
          </a-form-item>
          <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-textarea v-model="remarkVal"></a-textarea>
          </a-form-item>
          <!-- <a-form-item label="上传凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <div class="clearfix">
              <a-upload
                :data="{'isup':1,'bizPath':'temp'}"
                :multiple="true"
                :action="imgUrl"
                :headers="headers"
                accept=".jpg,.png"
                listType="picture-card"
                :fileList="fileList"
                @preview="handlePreview"
                @change="handleChange"
              >
                <div v-if="fileList.length < 6">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
            <div>
                只能上传jpg/png格式文件，文件不能超过1MB
            </div>
          </a-form-item> -->
        </a-form>
        <div>
          <a-button type="primary" style="width: 140px;height: 40px;display: inherit;margin:0 auto;" @click="submit">提交</a-button>
        </div>
      </div>  
  
  
    <!-- </page-layout> -->
</div>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JUpload from '@/components/jeecg/JUpload'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import { postAction } from '@/api/manage'
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"

  export default {
    name: "BlockProductApplyCopyModal",
    components: { 
      JUpload,
      JDictSelectTag,
    },
    props:['listCodeData'],
    data () {
      return {
        headers:{},
        previewVisible: false,
        previewImage: '',
        fileList: [],
        imgUrl:window._CONFIG['domianURL']+"/sys/common/upload",
        remarkVal:"",
        form: this.$form.createForm(this),
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
    },
    methods: {
      //提交表单
      submit:function(){
        if(!this.listCodeData.productName){
          this.$message.warning("请先设置剧本名称！")
          return
        }
        if(!this.listCodeData.total){
          this.$message.warning("请先设置二维码数量！")
          return
        }
        var pay_image = ""
        if(this.fileList.length>0){
          for(let i=0;i<this.fileList.length;i++){
            if(i==0){
              pay_image+=this.fileList[0].response.message;
            }else{
              pay_image+='/'+this.fileList[i].name;
            }
          }
        }           
        var paramsList={
          qrcodeApplyNumber: this.listCodeData.total,
          productName: this.listCodeData.productName,
          productId: this.listCodeData.id,
          payImage: pay_image,
          remark: this.remarkVal
        };
          const that = this;
        postAction("/block/blockProductApply/add", paramsList).then((res) => {
          if (res.success) {
            this.$message.warning(res.message);
            this.returnFull();
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
            
        })
      },
      returnFull(){
          this.$emit('returnUp',false)
      },
      returnFullNo(){},
      handleCancel () {
          this.previewVisible = false
      },
      handleChange ({ fileList }) {
          this.fileList = fileList;
      },
      handlePreview (file) {
          this.previewImage = file.url || file.thumbUrl
          this.previewVisible = true
      },
    }
  }
</script>